<template>
    <div>
        <section class="approval_steps">
            <p class="title">审批流</p>
            <van-steps 
                direction="vertical" 
                :active="stepList.length" 
                active-color="#02ccbd"
            >
                <!-- <van-step v-for="(item,index) in stepList" :key="index">
                    <h2 class="approve_title">
                        <span>{{item.check_node_user}} <em>({{item.check_node_title}})</em></span>
                        <span v-if="item.created_time" class="times">{{item.created_time}}</span>
                        <p class="approve_status" v-if="item.check_status==0">审核中</p>
                    </h2>
                    <p class="approve_reason" v-if="item.check_result">{{item.check_result}}</p>
                </van-step> -->
                <van-step v-for="(item,index) in stepList" :key="index">
                    <h2 class="approve_title">
                        <span>{{item.node_name}} <em>({{item.check_user}})</em></span>
                        <span v-if="item.created_at" class="times">{{item.created_at}}</span>
                        <!-- <p class="approve_status" v-if="!item.created_at">审核中</p> -->
                    </h2>
                    <p class="approve_reason" v-if="item.remark">{{item.remark}}</p>
                </van-step>
            </van-steps>
        </section>
    </div>
</template>
<script>
export default {
    name:'ApprovalStep',
    data(){
        return {}
    },
    props:{
        stepList:{
            type:Array,
            default:()=>[]
        },
        activeStep:{
            type:Number,
            default:0
        }
    }
}
</script>
<style lang="less" scoped>
.approval_steps{
    width: 100%;
    height: auto;
    padding: 10px 15px;
    box-sizing: border-box;
    background: #fff;
    font-size: 13px;
    color: #999;
    margin-top: 10px;
    .title{
        color: #151617;
        font-weight: bold;
        font-size: 14px;
        line-height: 36px;
    }
    .van-step{font-size: 14px;color: #151617;}
    /deep/ .van-step--vertical .van-step__circle-container{
        font-size: 23px;
        .van-step__circle{
            width: 14px;
            height: 14px;
        }
    }
    /deep/ .van-step--finish .van-step__circle{
        background-color: #02ccbd;
        
    }
    /deep/ .van-step--finish .van-step__line{
        background-color: #02ccbd;
    }
    .approve_title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        font-weight: normal;
        span{color: #151617;em{color: #999;}}
        .times{color: #999;}
        .approve_status{color: #02ccbd;}
    }
    .approve_reason{
        color: #151617;
        font-size: 14px;
        font-weight: normal;
    }
}
</style>